<template>
  <div>
    <button @click="back">back</button>
    <ul>
      <router-link custom   :to="{path:'/detail1',query:{id:item.id}}" v-for="(item) in songList"
                   :key="item.id">
        <li  @keypress.enter="navigate" >
          {{ item.al.name }}
          <div class="name">
        <span v-for="item in item.ar" :key="item.id">
        {{ item.name }}
          </span>
          </div>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
import {detailList, detailSong,} from "@/api/http";

export default {
  name: "MusivDetail",
  data() {
    return {
      list: [],
      songList: []
    }
  },
  created() {
    detailList(this.$route.query.id).then(res => {

      console.log(res)



      this.list = res.privileges.map(item => {
        return item.id
      })
      detailSong(this.list.join()).then(res1 => {
        console.log(res1)
        this.$store.commit('changeSONG_lIST',res1.songs)
        this.songList = res1.songs
      })
    })
  },
  methods: {
    back() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
ul {
  li {
    padding: 10px 0;
  }
}

.name {
  color: grey;
  font-size: 14px;
}
</style>
